import './Scss/PersonnelOverview.scss'
import { useRequest } from 'ahooks'
import { useEffect, useState } from 'react'
import { Http } from '../../../../Common/Api'
import { Pie } from '@ant-design/plots'
import dayjs from 'dayjs'

export const PersonnelOverview001 = () => {
    const { run: geyPersonStatPersonTypeStatAttendance } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let number = 0
            let list = []
            res.list.forEach((item, index) => {
                number += item.personCount
                list = [...list, { uuid: `${index}+1`, type: item.tableName, value: item.personCount }]
            })
            setNumber(number)
            setData(list)
        },
    })
    useEffect(() => {
        geyPersonStatPersonTypeStatAttendance({
            url: `getPersonStatPersonTypeStatAttendance`,
            data: { date: dayjs().format('YYYY-MM-DD') },
        })
    }, [geyPersonStatPersonTypeStatAttendance])

    const [number, setNumber] = useState(0)
    const [Color] = useState(['#07CCB0', '#BFFFA7', '#FF817C', '#ACCDFF', '#B9ECED'])
    const [Data, setData] = useState([])

    const [Charts, setCharts] = useState()

    useEffect(() => {
        const config = {
            width: 140,
            height: 140,
            data: Data,
            angleField: 'value',
            colorField: 'type',
            color: Color,
            radius: 1,
            innerRadius: 0.8,
            interactions: [{ type: 'element-default' }],
            label: false,
            tooltip: false,
            legend: false,
            statistic: {
                title: {
                    offsetY: 5,
                    style: { fontSize: 30, fontFamily: 'Bahnschrift', fontWeight: 'bold', color: '#FFFFFF' },
                    content: number,
                },
                content: {
                    offsetY: 10,
                    style: { fontSize: '16px', fontFamily: 'PingFang', fontWeight: 'bold', color: '#60EAFF' },
                    content: '总人数',
                },
            },
            pieStyle: { lineWidth: 0 },
        }
        setCharts(config)
    }, [Color, Data, number])

    return (
        <div className="PersonnelOverview001">
            {Charts && <Pie {...Charts} />}
            <div className="Table">
                {Data.map(({ uuid, type, value }, index) => (
                    <div key={uuid}>
                        <div style={{ color: Color[index] }}>{type}</div>
                        <div>{value} 人</div>
                    </div>
                ))}
            </div>
        </div>
    )
}
